<datatable-demos></datatable-demos>

<div class="content-section introduction">
    <div>
        <span class="feature-title">DataTable</span>
        <span>This samples demonstrates a CRUD implementation using various PrimeNG components.</span>
    </div>
</div>

<div class="content-section implementation">
    <p-dataTable [value]="cars" selectionMode="single" [(selection)]="selectedCar" (onRowSelect)="onRowSelect($event)" [paginator]="true" [rows]="15" [responsive]="true">
        <p-header>CRUD for Cars</p-header>
        <p-column field="vin" header="Vin" [sortable]="true"></p-column>
        <p-column field="year" header="Year" [sortable]="true"></p-column>
        <p-column field="brand" header="Brand" [sortable]="true"></p-column>
        <p-column field="color" header="Color" [sortable]="true"></p-column>
        <p-footer><div class="ui-helper-clearfix" style="width:100%"><button type="button" pButton icon="fa-plus" style="float:left" (click)="showDialogToAdd()" label="Add"></button></div></p-footer>
    </p-dataTable>

    <p-dialog header="Car Details" [minY]="70" [(visible)]="displayDialog" [responsive]="true" showEffect="fade" [modal]="true">
        <div class="ui-grid ui-grid-responsive ui-fluid" *ngIf="car">
            <div class="ui-grid-row">
                <div class="ui-grid-col-4"><label for="vin">Vin</label></div>
                <div class="ui-grid-col-8"><input pInputText id="vin" [(ngModel)]="car.vin" /></div>
            </div>
            <div class="ui-grid-row">
                <div class="ui-grid-col-4"><label for="year">Year</label></div>
                <div class="ui-grid-col-8"><input pInputText id="year" [(ngModel)]="car.year" /></div>
            </div>
            <div class="ui-grid-row">
                <div class="ui-grid-col-4"><label for="brand">Brand</label></div>
                <div class="ui-grid-col-8"><input pInputText id="brand" [(ngModel)]="car.brand" /></div>
            </div>
            <div class="ui-grid-row">
                <div class="ui-grid-col-4"><label for="color">Color</label></div>
                <div class="ui-grid-col-8"><input pInputText id="color" [(ngModel)]="car.color" /></div>
            </div>
        </div>
        <p-footer>
            <div class="ui-dialog-buttonpane ui-helper-clearfix">
                <button type="button" pButton icon="fa-close" (click)="delete()" label="Delete"></button>
                <button type="button" pButton icon="fa-check" (click)="save()" label="Save"></button>
            </div>
        </p-footer>
    </p-dialog>
</div>

<div class="content-section documentation">
    <p-tabView effect="fade">
        <p-tabPanel header="datatablecruddemo.ts">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/datatable/datatablecruddemo.ts" class="btn-viewsource" target="_blank">
                <i class="fa fa-github"></i>
                <span>View on GitHub</span>
            </a>
<pre>
<code class="language-typescript" pCode ngNonBindable>
export class DataTableCrudDemo implements OnInit &#123;

    displayDialog: boolean;

    car: Car = new PrimeCar();

    selectedCar: Car;

    newCar: boolean;

    cars: Car[];

    constructor(private carService: CarService) &#123; &#125;

    ngOnInit() &#123;
        this.carService.getCarsSmall().then(cars => this.cars = cars);
    &#125;

    showDialogToAdd() &#123;
        this.newCar = true;
        this.car = new PrimeCar();
        this.displayDialog = true;
    &#125;

    save() &#123;
        let cars = [...this.cars];
        if(this.newCar)
            cars.push(this.car);
        else
            cars[this.findSelectedCarIndex()] = this.car;

        this.cars = cars;
        this.car = null;
        this.displayDialog = false;
    &#125;

    delete() &#123;
        let index = this.findSelectedCarIndex();
        this.cars = this.cars.filter((val,i) => i!=index);
        this.car = null;
        this.displayDialog = false;
    &#125;

    onRowSelect(event) &#123;
        this.newCar = false;
        this.car = this.cloneCar(event.data);
        this.displayDialog = true;
    &#125;

    cloneCar(c: Car): Car &#123;
        let car = new PrimeCar();
        for(let prop in c) &#123;
            car[prop] = c[prop];
        &#125;
        return car;
    &#125;

    findSelectedCarIndex(): number &#123;
        return this.cars.indexOf(this.selectedCar);
    &#125;
&#125;

class PrimeCar implements Car &#123;

    constructor(public vin?, public year?, public brand?, public color?) &#123;&#125;
&#125;
</code>
</pre>
        </p-tabPanel>

        <p-tabPanel header="datatablecruddemo.html">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/datatable/datatablecruddemo.html" class="btn-viewsource" target="_blank">
                <i class="fa fa-github"></i>
                <span>View on GitHub</span>
            </a>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-dataTable [value]="cars" selectionMode="single" [(selection)]="selectedCar" (onRowSelect)="onRowSelect($event)" [paginator]="true" [rows]="15" [responsive]="true"&gt;
    &lt;p-header&gt;CRUD for Cars&lt;/p-header&gt;
    &lt;p-column field="vin" header="Vin" [sortable]="true"&gt;&lt;/p-column&gt;
    &lt;p-column field="year" header="Year" [sortable]="true"&gt;&lt;/p-column&gt;
    &lt;p-column field="brand" header="Brand" [sortable]="true"&gt;&lt;/p-column&gt;
    &lt;p-column field="color" header="Color" [sortable]="true"&gt;&lt;/p-column&gt;
    &lt;p-footer&gt;&lt;div class="ui-helper-clearfix" style="width:100%"&gt;&lt;button type="button" pButton icon="fa-plus" style="float:left" (click)="showDialogToAdd()" label="Add"&gt;&lt;/button&gt;&lt;/div&gt;&lt;/p-footer&gt;
&lt;/p-dataTable&gt;

&lt;p-dialog header="Car Details" [(visible)]="displayDialog" [responsive]="true" showEffect="fade" [modal]="true"&gt;
    &lt;div class="ui-grid ui-grid-responsive ui-fluid" *ngIf="car"&gt;
        &lt;div class="ui-grid-row"&gt;
            &lt;div class="ui-grid-col-4"&gt;&lt;label for="vin"&gt;Vin&lt;/label&gt;&lt;/div&gt;
            &lt;div class="ui-grid-col-8"&gt;&lt;input pInputText id="vin" [(ngModel)]="car.vin" /&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="ui-grid-row"&gt;
            &lt;div class="ui-grid-col-4"&gt;&lt;label for="year"&gt;Year&lt;/label&gt;&lt;/div&gt;
            &lt;div class="ui-grid-col-8"&gt;&lt;input pInputText id="year" [(ngModel)]="car.year" /&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="ui-grid-row"&gt;
            &lt;div class="ui-grid-col-4"&gt;&lt;label for="brand"&gt;Brand&lt;/label&gt;&lt;/div&gt;
            &lt;div class="ui-grid-col-8"&gt;&lt;input pInputText id="brand" [(ngModel)]="car.brand" /&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="ui-grid-row"&gt;
            &lt;div class="ui-grid-col-4"&gt;&lt;label for="color"&gt;Color&lt;/label&gt;&lt;/div&gt;
            &lt;div class="ui-grid-col-8"&gt;&lt;input pInputText id="color" [(ngModel)]="car.color" /&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;p-footer&gt;
        &lt;div class="ui-dialog-buttonpane ui-helper-clearfix"&gt;
            &lt;button type="button" pButton icon="fa-close" (click)="delete()" label="Delete"&gt;&lt;/button&gt;
            &lt;button type="button" pButton icon="fa-check" (click)="save()" label="Save"&gt;&lt;/button&gt;
        &lt;/div&gt;
    &lt;/p-footer&gt;
&lt;/p-dialog&gt;
</code>
</pre>
        </p-tabPanel>
    </p-tabView>
</div>
